<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>提交培训需求审批</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <link rel="stylesheet" href="../../../js/lay-module/step-lay/step.css" media="all">
    <style>
        .layui-carousel > [carousel-item]{
            position: relative;
            width: 100%;
            height: 100%;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                        <div carousel-item>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">您认为一个企业的成功，培训员工是必须的嘛</label>
                                        <div class="layui-input-block">
                                            <input id="lessonName" type="text" name="lessonName" lay-verify="required" lay-reqtext="课程名称不能为空" placeholder="请选择" value="" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">您认为员工主动学习新知识新技能的动机是什么</label>
                                            <div class="layui-input-block">
                                                <select id="lessonType" name="lessonType" lay-filter="lessonType" lay-verify="required">
                                                    <option value="">--请选择培训动机--</option>
                                                    <option value="1">增强工作技能</option>
                                                    <option value="2">实际工作需要，否则会影响到自己的绩效</option>
                                                    <option value="3">只是个人兴趣爱好</option>
                                                </select>
                                            </div>
                                        </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">您认为员工现在最需要的是什么培训</label>
                                        <div class="layui-input-block">
                                                <select id="what" name="lessonType" lay-filter="lessonType" lay-verify="required">
                                                    <option value="">--请选择培训种类--</option>
                                                    <option value="1">专业知识</option>
                                                    <option value="2">安全质量</option>
                                                    <option value="3">管理能力</option>
                                                    <option value="4">工作技能</option>
                                                    <option value="5">其他</option>
                                                </select>
                                            </div>
                                        </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">您认为对员工来说，每次培训课多长时间合适</label>
                                        <div class="layui-input-block">
                                            <input id="lessonDate" type="text" name="lessonDate" lay-verify="required"  placeholder="请选择培训时间" value="" class="layui-input" readonly>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">您认为对员工来说，培训频率多久为佳</label>
                                        <div class="layui-input-block">
                                            <input id="address" type="text" name="address" lay-verify="required" lay-reqtext="" placeholder="请选择" value="" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">您认为培训安排在什么时间比较适宜</label>
                                        <div class="layui-input-block">
                                            <input id="studentNumber" type="text" name="studentNumber" lay-verify="required" lay-reqtext="学员人数不能为空" placeholder="请选择" value="" class="layui-input">
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">您认为过去一年为员工设计的培训最让你满意的是哪一项</label>
                                        <div class="layui-input-block">
                                            <input id="wanderful" type="text" name="studentNumber" lay-verify="required" lay-reqtext="学员人数不能为空" placeholder="请选择" value="" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">您认为培训对员工个人发展及工作绩效的提升关联程度如何</label>
                                        <div class="layui-input-block">
                                            <input id="person" type="text" name="studentNumber" lay-verify="required" lay-reqtext="学员人数不能为空" placeholder="请选择" value="" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">企业员工通常是在哪里进行培训</label>
                                        <div class="layui-input-block">
                                            <select id="lessonModel" name="lessonModel" lay-filter="lessonModel" lay-verify="required">
                                                <option value="">请选择培训形式</option>
                                                <option value="1">企业内部的会议室</option>
                                                <option value="2">租用酒店会议室</option>
                                                <option value="3">户外拓展</option>
                                                <option value="3">其他</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">企业员工参加培训的培训方式主要是以下哪几种</label>
                                        <div class="layui-input-block">
                                            <select id="way" name="lessonType" lay-filter="lessonType" lay-verify="required">
                                                <option value="">--请选择培训方式--</option>
                                                <option value="1">主题内训</option>
                                                <option value="2">外聘讲师主题内训</option>
                                                <option value="3">工作技能培训</option>
                                                <option value="4">户外拓展培训</option>
                                                <option value="5">其他</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="formStep">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">课程名称:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">生产工艺技能</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">讲师:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">王五</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">课时:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">3</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">培训时间:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">
                                                <span style="font-size: 18px;color: #333;">2021-12-12</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">培训地点:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">综合楼二层303</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">学员人数:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">50</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">岗位类别:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">技工类</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">培训形式:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">内训</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">培训类型:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">车间班组级</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">审批状态:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">未审批</div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                &emsp;提交培训需求&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        提交成功
                                    </div>
                                    <div style="font-size: 14px;color: #666;margin-top: 20px;">预计一天审批完成</div>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use([ 'form', 'step','laydate','jquery'], function () {
        var $ = layui.$,
            form = layui.form,
            step = layui.step,
            laydate = layui.laydate;

        // 时间选择器
        laydate.render({
            elem: '#lessonDate',
            trigger:'click',
            min:minDate(),

        });
        // 设置最小可选的日期
        function minDate() {
            var now = new Date();
            return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
        }

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '填写培训需求信息'
            }, {
                title: '确认培训需求信息'
            }, {
                title: '完成'
            }]
        });

        var flag1 = false;
        // 1. 验证课程名称，失去焦点时触发
        $("#lessonName").blur(function(){
            var lessonName = $("#lessonName").val();
            var reg = /^[a-zA-Z]*[\u4e00-\u9fa5]*$/;//正则表达式
            if(lessonName.length == 0|| lessonName==null || lessonName == '') {
                layer.msg('课程名称不能为空', {icon: 2,time:1000});
                return;
            }else{
                flag1 = reg.test(lessonName);
                if(!flag1) {
                    layer.msg('课程名称格式不对', {icon: 2,time:1000});
                    return;
                }
            }
        });

        var flag2 = false;
        // 2. 验证讲师，失去焦点时触发
        $("#teacher").blur(function(){
            var teacher = $("#teacher").val();
            var reg = /^[a-zA-Z_]*[\u4e00-\u9fa5]*$/;//正则表达式
            if(teacher.length == 0|| teacher==null || teacher == '') {
                layer.msg('讲师姓名不能为空', {icon: 5,time:1000});
                return;
            }else{
                flag2 = reg.test(teacher);
                if(!flag2) {
                    layer.msg('讲师姓名格式为中文或英文', {icon: 5,time:1000});
                    return;
                }
            }
        });

        var flag3 = false;
        // 3.验证课时，失去焦点时触发
        $("#lessonHour").blur(function(){
            var lessonHour = $("#lessonHour").val();
            var reg = /^[0-9]*$/;//正则表达式
            if(lessonHour.length == 0|| lessonHour==null || lessonHour == '') {
                layer.msg('课时不能为空', {icon: 5,time:1000});
            }else if(!reg.test(lessonHour)){
                layer.msg('课时只能为数字', {icon: 5,time:1000});
                return;

            }else{
                flag3=true;
            }
        });

        var flag4 = false;
        // 2. 验证地址，失去焦点时触发
        $("#address").blur(function(){
            var address = $("#address").val();
            var reg = /^[\u4e00-\u9fa5]*[a-zA-Z0-9_]*$/;//正则表达式
            if(address.length == 0|| address==null || address == '') {
                layer.msg('地址不能为空', {icon: 5,time:1000});
                return;
            }else{
                flag4 = reg.test(address);
                if(!flag4) {
                    layer.msg('地址格式不正确', {icon: 5,time:1000});
                    return;
                }
            }
        });

        var flag5 = false;
        // 3.验证学员人数，失去焦点时触发
        $("#studentNumber").blur(function(){
            var studentNumber = $("#studentNumber").val();
            var reg = /^[1-9][0-9]*$/;//正则表达式
            if(studentNumber.length == 0|| studentNumber==null || studentNumber == '') {
                layer.msg('学员人数不能为空', {icon: 5,time:1000});
            }else if(!reg.test(studentNumber)){
                layer.msg('学员人数为大于0的数字', {icon: 5,time:1000});
                return;

            }else{
                flag5=true;
            }
        });



        form.on('submit(formStep)', function (data) {
            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            step.next('#stepForm');
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });
    })
</script>
</body>
</html>
